<template>
    <div class="tag-select-comp">

        <el-row>
            <el-col :span="5">
                <!--        选择标签-->
                <el-popover
                        placement="top"
                        width="400"
                        trigger="click">
                    <div class="tag-select-content">
                        <h2 class="content-text">标签</h2>
                        <!--                        标签列表-->
                        <div class="tag-list">
                            <span @click="selectTag(tag)" class="tag" v-for="(tag,index) in tags" :key="index">
                                {{tag.name}}
                            </span>
                        </div>
                    </div>
                    <el-tag slot="reference" size="medium" type="info" style="cursor: pointer;margin-bottom: 10px;">
                        + 设置标签
                    </el-tag>


                </el-popover>
            </el-col>
            <el-col :span="19">
                <!--        选择的标签-->
                <div class="tag-list-select">
                    <el-tag
                            class="tag-select"
                            size="medium"
                            :key="index"
                            v-for="(tag,index) in dynamicTags"
                            closable
                            :disable-transitions="false"
                            @close="handleClose(tag)">
                        {{tag.name}}
                    </el-tag>
                </div>
            </el-col>
        </el-row>


    </div>
</template>

<script>
    import {listTag} from "@/api/common/common"

    export default {
        name: 'TagSelect',
        data() {
            return {
                tags: [],
                dynamicTags: []
            };
        },
        props: {
            num: {
                type: Number,
                default: 10
            }
        },
        methods: {
            updateTag(tags) {
                this.dynamicTags.push(...tags)
                this.$emit('update:selectTag', this.dynamicTags)
            },
            handleClose(tag) {
                this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
            },
            /**
             *选择标签，需要判断是否重复
             */
            selectTag(tag) {
                let length = this.dynamicTags.length;
                if (length > this.num) {
                    this.msgWarn("最后选择10个标签")
                    return;
                }
                for (let i = 0; i < length; i++) {
                    let t = this.dynamicTags[i]
                    if (t.tagId === tag.tagId) {
                        return
                    }
                }
                this.dynamicTags.push(tag)
                this.$emit('update:selectTag', this.dynamicTags)
            },
            /**
             * 获取所有标签
             */
            getTag() {
                listTag().then(res => {
                    this.tags = res.data
                })
            }
        },
        mounted() {
            this.getTag()
        },
        components: {}
    }
</script>

<style scoped lang='less'>
    .tag-select-comp {
        width: 100%;
        margin: 10px 0;

        .tag {
            display: inline-block;
            font-size: 13px;
            color: #909399;
            border: 1px solid #909399;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 4px;
        }

        .tag-list-select {
            .tag-select {
                margin-right: 10px;
                margin-bottom: 10px;
            }
        }
    }
</style>


<style lang="less">
    .el-popover, .el-popper {
        .tag-select-content {
            min-height: 300px;

            .content-text {
                height: 20px;
                line-height: 20px;
                text-align: center;
                margin-bottom: 5px;
            }

            .tag-list {
                display: flex;
                flex-wrap: wrap;

                .tag:hover {
                    border-color: #E6A23C;
                    color: #E6A23C;
                }

                .tag {
                    display: inline-block;
                    font-size: 12px;
                    color: #909399;
                    border: 1px solid #909399;
                    padding: 2px 15px;
                    cursor: pointer;
                    border-radius: 4px;
                    margin: 5px;
                }
            }

        }
    }
</style>